@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap");

body {
  direction: rtl;
  font-family: "El Messiri", sans-serif;
}

:root {
  --ebtb3-white: #ffffff;
  --ebtb3-dark: #000000;
  --ebtb3-primary: #757b66;
  --ebtb3-secondary: #876140;
  --ebtb3-gray: #cccccc;
  --ebtb3-icon-shadow: 0 0 4px #142ba0;

  /* ===== SPACING ===== */
  --ebtb3-space-xs: 0.4rem;
  --ebtb3-space-sm: 0.8rem;

  /* ===== FONT SCALE ===== */

  --ebtb3-fs-md: 1.125rem;
  --ebtb3-fs-lg: 1.155rem;
  --ebtb3-fs-xl: 1.6rem;
}

.ebtb3-top-bar {
  color: var(--ebtb3-dark);
  text-align: center;
  padding-block: var(--ebtb3-space-xs);
  background-color: var(--ebtb3-primary);
}

.ebtb3-top-bar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.ebtb3-social-icons-top-bar {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--ebtb3-space-xs);
}

.ebtb3-social-icons-top-bar a {
  text-decoration: none;
}

.ebtb3-social-icon-top-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 10px;
  color: var(--ebtb3-white);
  font-size: var(--ebtb3-fs-md);
  font-weight: bold;
  border: 2px solid var(--ebtb3-white);
  line-height: 0;
}

.ebtb3-social-icon-top-bar .fa-whatsapp {
  font-size: var(--ebtb3-fs-lg);
  font-weight: 600;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media (max-width: 1440px) {
  .ebtb3-top-bar-container {
    padding-inline: var(--ebtb3-space-sm);
  }
}

@media (max-width: 760px) {
  .ebtb3-top-bar {
    height: auto;
    text-align: center;
  }

  .ebtb3-social-icon-top-bar {
    font-size: 18px;
    font-weight: bold;
  }
}